<!-- 机构作业范围 -->
<template>
  <div class="org institutions-jobs-area">
    <div class="left">
      <!-- 左侧树形结构树 -->
      <el-scrollbar style="width: 100%;margin-bottom:50px">
        <el-card
          class="box-card"
          shadow="never"
        >
          <div class="app-container">
            <el-tree
              ref="orgTree"
              style="font-size: 12px display: none;"
              :props="defaultProps"
              :indent="22"
              highlight-current
              node-key="id"
              :default-expanded-keys="treeExpandData"
              :default-checked-keys="['1024985257948084801']"
              :expand-on-click-node="false"
              :check-strictly="true"
              :data="list"

              class="filter-tree customer-tree-box"
              @node-click="btnTree"
            />
          </div>
        </el-card>
      </el-scrollbar>
    </div>
    <!-- 右侧地图 -->
    <div class="right">
      <MAP
        :id="id"
        :is-show="isShow"
      ></MAP>
    </div>
  </div>
</template>
<script>
import { agencyList, detail } from '@/api/institutions'
import MAP from './components/MAp.vue'
export default {
  name: 'Jgzyfw',
  components: {
    MAP
  },
  data() {
    return {
      treeExpandData: [], // 树形展开的数据
      treeExpandData2: [], // 树形默认展开的数据
      provincialCenterId: '', // 省级中心id
      provincialCenterId2: [],
      list: [],
      defaultProps: {
        label: 'name'
      },
      id: '1024980634071852417',
      isShow: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList () {
      const { data } = await agencyList()
      this.list = JSON.parse(data)
    },
    async btnTree(e) {
      await detail(e.id)
      this.id = e.id
      if (!e.children) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // 获取树形结构默认展开节点
    getExpandData(provincialCenterId) {
      // 将传入的数据转换为数组
      const provincialCenterIdArr = provincialCenterId.split(',')
      // 循环数组，将数组中的数据添加到treeExpandData中
      provincialCenterIdArr.forEach(item => {
        this.treeExpandData.push(item)
      })
    },
    getExpandData2(provincialCenterId2) {
      // 将传入的数据添加到treeExpandData2中
      this.treeExpandData2 = [provincialCenterId2]
      const _this = this
      // 加入延时函数是因为需要等待页面数据加载完毕
      setTimeout(() => {
        _this.nodeClick(provincialCenterId2)
      }, 50)
    },
    async getSgencyList() {
      const { data } = await agencyList()
      this.depts = JSON.parse(data)
      this.provincialCenterId = this.depts[0].children[0].id // 默认展开第一个节点下的第一个节点
      this.provincialCenterId2 = this.depts[0].children[0].children[0]
      this.$nextTick(function() {
        this.$refs['orgTree'].setCurrentKey(
          this.depts[0].children[0].children[0].id
        )
      })
      this.getExpandData2(this.provincialCenterId2)
      this.getExpandData(this.provincialCenterId)
    }
  }
}
</script>
<style lang="scss" scoped>
.institutions-jobs-area {
  height: 905px;
  display: flex;
  justify-content: space-between;
  margin: 23px 20px;
  .left {
    width: 219px;
    background-color: #fff;
    border-radius: 5px;
    margin-right: 12px;
    .app-container {
      padding: 0;
    }
  }
  .right {
    flex: 1;
    background-color: #fff;
    margin-left: 12px;
  }
}
</style>
